<template>
  <div class="prompt-box">
    <template v-if="showDialog === 'showIsComming'">
      <div class="prompt-text no-btn">
        老师正在赶来的路上，请耐心等待~
      </div>
    </template>
    <template v-if="showDialog === 'showEnded'">
      <div class="prompt-text no-btn">
        直播已结束
      </div>
    </template>
    <template v-if="showDialog === 'showPause'">
      <div class="prompt-text no-btn">
        直播暂停，请稍事休息~
      </div>
    </template>
    <template v-if="showDialog === 'showWillStart'">
      <div class="prompt-text no-btn">
        直播未开始
      </div>
    </template>
    <template v-if="showDialog === 'showLogin'">
      <div class="prompt-text">
        用户身份失效，请重新登录！
      </div>
      <div
        class="btn-text"
        @click="onClickLogin"
      >
        重新登录
      </div>
    </template>
    <template v-if="showDialog === 'showTryAgain'">
      <div class="prompt-text">
        抱歉，视频获取失败～
      </div>
      <div
        class="btn-text"
        @click="onClickTry"
      >
        点我重试
      </div>
    </template>
    <template v-if="showDialog === 'showExpired'">
      <div class="prompt-text no-btn">
        您的学员账号已过期，请联系机构老师！
      </div>
    </template>
    <template v-if="showDialog === 'goRegister'">
      <div class="prompt-text">
        {{ '您已免费试听'+auditionTime+'分钟，完整观看请' }}
      </div>
      <div
        class="btn-text"
        @click="onClickRegister"
      >
        注册
      </div>
    </template>
    <template v-if="showDialog === 'showApplyTip'">
      <div class="prompt-text">
        您还没有报名课程，完整观看请
      </div>
      <div
        class="btn-text"
        @click="onClickApply"
      >
        报名学习
      </div>
    </template>
    <template v-if="showDialog === 'showEnroll'">
      <div class="prompt-text">
        您已试听过本课程，完整观看请
      </div>
      <div
        class="btn-text"
        @click="onClickEnroll"
      >
        报名
      </div>
    </template>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    showDialog: {
      type: String,
      default: '',
    },
    auditionTime: {
      type: Number,
      default: 0,
    },
    liveStatus: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    // 重新获取视频
    onClickTry () {
      this.$emit('reTry')
    },
    // 重新登录弹窗按钮
    onClickRegister () {
      sessionStorage.setItem('loginFromPage', JSON.stringify({
        from: this.$route.name,
        query: this.$route.query,
      }))
      this.$router.push({ name: 'register' })
    },
    // 报名学习
    onClickApply () {
      this.$router.push({
        name: 'classDetail',
        query: {
          classId: this.$route.query.classId,
          title: this.$route.query.className,
        },
      })
    },
    // 报名-跳转到付款页
    onClickEnroll () {
      this.$emit('goEnroll')
    },
  },
})
</script>
<style lang="scss" scoped>
.prompt-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 127px 0;
  text-align: center;
  background-color: #000;
}
.prompt-text {
  font-size: 30px;
  color: #fff;
  margin-bottom: 40px;
}
.no-btn {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-text {
  width: 266px;
  height: 70px;
  color: #fff;
  margin: auto;
  font-size: 32px;
  line-height: 71px;
  border-radius: 3px;
  background-color: $primary-web;
  @include active;
}
</style>
